<template>
  <div class="dhs-static">
    <div class="common-top">
      <div class="common-top-tab">
        <div
          v-for="(item, index) in tabList"
          :key="index"
          :class="item.active ? 'active': ''"
          @click="handleClickTab(item, index)"
          class="common-top-tab-item">{{ item.label }}</div>
      </div>
      <div
        @click="Jump('dhsYeJi')"
        class="common-top-link">
        <span>业绩中心</span>
        <span class="icon">
          <!-- <svg-icon icon-class="icon_linkto" /> -->
          <!-- TODO svg 替换 -->
          <i class="icon-right"></i>
        </span>
      </div>
    </div>
    <div class="common-bottom">
      <div class="common-bottom-wrap">
        <div v-for="(item, index) in staticData" class="common-bottom-wrap-item">
          <div class="num">{{ item.count }}</div>
          <div class="text" @click="handleClickShowPop">
            {{ item.name }} 
            <span class="icon" v-if="index == 0">
              <!-- TODO 暂时隐藏svg -->
              <!-- <svg-icon icon-class="icon_tips" /> -->
            </span> 
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model="showPopUp" position="bottom" round>
      <ul class="Glossary" v-if="staticData.length>0">
        <li v-for="(item, index) in staticData" :key="index">
          <p>{{item.name}}</p>
          <p>{{item.desc}}</p>
        </li>
      </ul>
      <div class="ok" @click="showPopUp = false">
        <span>我知道了</span>
      </div>
    </van-popup>
  </div>
</template>

<script>
  /**
   * @Author: yqe@360shop.cn
   * @Date: 2020-05-12 15:52:02
   * @Last Modified by: yqe@360shop.cn
   * @Last Modified time: 2020-05-12 15:52:06
   */
  import Vue from 'vue'
  import { Popup } from 'vant'
  import { dhsPerformanceShow } from '@/api/user/dhs/dhsApi'
  Vue.use(Popup)
  export default Vue.extend({
    name: 'index',
    data() {
      return {
        tabList: [
          { label: '今日', value: 1, active: true },
          { label: '昨日', value: -1, active: false },
          { label: '7天', value: 7, active: false },
          { label: '30天', value: 30, active: false }
        ],
        postData: {
          time: 1
        },
        showPopUp: false,
        staticData: []
      }
    },
    methods: {
      /**
       * tab切换
       */
      handleClickTab(data, index) {
        this.tabList.forEach((item, num) => {
          this.$set(this.tabList[num], 'active', false)
        })
        this.$set(this.tabList[index], 'active', true)
        this.postData.time = data.value
        this.dhsPerformanceShowPost()
      },
      /**
       * 初始化
       */
      init() {
        this.dhsPerformanceShowPost()
      },
      /**
       * 统计数据接口
       */
      dhsPerformanceShowPost() {
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 50000)
        const postData = Object.assign({}, this.postData, true)
        dhsPerformanceShow(postData).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.staticData = res.data
          }
        })
      },
      /**
       * 链接跳转
       */
      Jump(url, data) {
        this.$JumpPath(this, url, data)
      },
      /**
       * 打开提示弹层
       */
      handleClickShowPop() {
        this.showPopUp = true
      }
    },
    created() {
      this.init()
    }
  })
</script>

<style lang="scss">
  @import "src/styles/variables";
  .dhs-static{
    margin: 20px;
    border-radius: 16px;
    background: $default;
    .common-top{
      padding: 25px;
      border-bottom: 1px solid #EDEDED;
      &-tab{
        font-size: 0;
        display: inline-block;
        &-item{
          display: inline-block;
          width: 90px;
          padding:10px 0;
          border: 2px solid #D9D9D9;
          border-radius: 30px;
          margin-right: 16px;
          font-size: 24px;
          line-height: 24px;
          color: #666;
          text-align: center;
          &.active{
            color: #fff;
            background: #F30C23;
            border: 2px solid #F30C23;
          }
        }
      }
      &-link{
        color: #666;
        font-size: 26px;
        float: right;
        display: inline-block;
        line-height: 44px;
        .icon{
          font-size: 26px;
          vertical-align: 0px;
        }
      }
    }
    .common-bottom{
      &-wrap{
        font-size: 0;
        padding: 12px 0;
        &-item{
          display: inline-block;
          width: percentage(1/3);
          font-size: 24px;
          color: #666;
          text-align: center;
          padding: 30px 0;
          .num{
            font-size: 28px;
            color: #F30C23;
            font-weight: 500;
            margin-bottom: 19px;
            font-family: Alibaba-PuHuiTi;
          }
          .text{
            .icon{
              color: #ff976a;
            }
          }
        }
      }
    }
    .Glossary {
      margin-top: 30px;
      padding-left: 30px;
      li {
        padding: 24px 0;
        border-bottom: 1px solid #f4f4f4;
        box-sizing: border-box;
        p {
          width: 710px;
          line-height: 48px;
          color: #333;
          font-size: 28px;
          &:nth-child(2) {
            color: #999;
            font-size: 24px;
          }
        }
      }
    }
    .ok {
      background-color: $warning;
      text-align: center;
      margin: 30px;
      margin-top: 20px;
      border-radius: 42px;
      span {
        line-height: 84px;
        color: $default;
        font-size: 30px;
      }
    }
  }
  
</style>
